<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟数据代理</title>
</head>
<body>
<script>
    function Vue(options){
        this._data = {};
        this.that = this;
        // for-in 语句
        // for 语句是严格的迭代语句，用于枚举对象的属性。
        // 它的语法如下：
        // for (property in expression) statement

        // 例子：
        // for (sProp in window) {
        //     alert(sProp);
        // }

        // 这里，for-in 语句用于显示 window 对象的所有属性。
        // 前面讨论过的 PropertyIsEnumerable() 是 ECMAScript 中专门用于说明属性是否可以用 for-in 语句访问的方法。

        for (let property in options) {
            console.log("property: ", property);
            // 自身属性
            if (options.hasOwnProperty(property)) {
                // alert("this is fog (" + property + ") for sure. Value: " + options[property]);

                // 1. 访问代理对象时返回 _data 同名属性
                // 2. 设置代理对象时更新 _data 同名属性
                Object.defineProperty(this, property, {
                    // 1
                    get(){
                        return this._data[property];
                    },
                    // 2
                    set(value){
                        this._data[property] = value;
                    }
                });

                // _data 收集所有的属性
                this._data[property] = options[property];
            } else {
                // alert(property); // toString or something else
            }
        }
    }

    const vm = new Vue({
        first_name: 'Wu',
        last_name: "Kris"
    });
    // // _data
    // console.log(vm._data["first_name"]);
    // // 代理
    // console.log(vm._data["first_name"]);
    // // _data
    // console.log(vm["last_name"]);
    // // 代理
    // console.log(vm["last_name"]);
    // // 设置代理对象
    // vm["last_name"] = "亦凡";
    // // 测试 _data 是否更新
    // console.log(vm._data["last_name"]);
    // // 设置 _data
    // vm._data["first_name"] = "吴";
    // // 测试代理对象
    // console.log(vm["first_name"]);
</script>
</body>
</html>
